<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="我的宝宝"
        right-text="添加宝宝"
        left-arrow
        @click-left="$router.go(-1)"
        @click-right="onClickRight"
      />
    </header>
    <div class="content">
      <div class="baby">
        <van-swipe-cell>
          <div class="babylist" @click="gohome()">
            <div class="left">
              <img src="/img/icons1/icon_messages.png" alt="">
              <div class="title">
                <span>Kimi</span>
                <p>1岁</p>
              </div>
            </div>
            <div class="right">
              <img src="/img/icons1/icon_more.png" alt="">
            </div>
          </div>
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" />
          </template>
        </van-swipe-cell>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { NavBar, Toast, Card, SwipeCell, Button } from 'vant'

Vue.use(NavBar)
Vue.use(Card)
Vue.use(SwipeCell)
Vue.use(Button)
export default {
  methods: {
    onClickRight () {
      Toast('按钮')
    },
    gohome () {
      this.$router.push('/home')
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/lib/reset.scss';
.box {
  .header {
    @include rect(100%,.44rem);
    .van-nav-bar {// navbar样式
      background-color: #FCCE00;
      @include rect(100%,.44rem);
      /deep/.van-nav-bar__left {// 左按钮
        .van-icon {
          color: white;
          font-size: .17rem;
        }
      }
      /deep/.van-nav-bar__title{// title
        height: .44rem;
        color: #FFFFFF;
        font-size: .19rem;
        font-family:PingFang SC;
        font-weight:bold;
      }
      /deep/.van-nav-bar__text { // 右按钮
          color: #FFFFFF;
          font-size: .14rem;
          font-family:PingFang SC;
          font-weight:bold;
      }
    }
  }
  .content {
    background-color: rgb(242,242,242);
  }
  // 宝宝列表
  .baby {
    .van-swipe-cell {
      margin-top: .1rem;
    }
    .babylist {
      height: .5rem;
      background-color: white;
      @include padding(.13rem .22rem);
      @include flexbox();
      @include justify-content(space-between);
      .left {
        @include flexbox();
        .title {
          margin-left: .1rem;
          span {
            font-size:.12rem;
            font-family:PingFang SC;
            font-weight:bold;
            line-height: .12rem;
            display: block;
          }
          p {
            font-size: .16rem;
            font-family:PingFang SC;
            font-weight:500;
            color:rgba(102,102,102,1);
            line-height: .16rem;
            @include transform(scale(.5));
          }
        }
        img {
          width: .24rem;
          height: .24rem;
        }
      }
      .right {
        img {
          width: .07rem;
          height: .12rem;
        }
      }
    }
  }
}
</style>
